<template>
  <div class="all_channels-container">
    <el-select
      clearable
      v-model="channelId2"
      placeholder="请选择"
      @change="changeHandle"
    >
      <el-option
        v-for="item in channelOptions"
        :key="item.id"
        :label="item.name"
        :value="item.id"
      >
      </el-option>
    </el-select>
  </div>
</template>

<script>
/**
 * !注意：统一在组件上监听 get-channel-id 事件获取下拉选选中的频道 id
 */
import { getAllChannels } from '@/api/article'

export default {
  name: 'AllChannels',
  props: {
    value: {
      type: [Number, String],
      required: true,
    },
  },
  // components: {},
  data() {
    return {
      channelId: '', // 选中的频道 id
      // 频道选项
      channelOptions: [],
    }
  },
  computed: {
    channelId2: {
      get() {
        return this.value
      },
      set(val) {
        this.channelId = val
      },
    },
  },
  // watch: {},
  // 钩子函数
  created() {
    this._getChannels()
  },
  methods: {
    // @获取所有频道
    async _getChannels() {
      const [err, res] = await getAllChannels()
      if (err)
        return this.$message({
          type: 'error',
          message: '无法获取频道数据，请刷新后重试',
        })
      // console.log('频道数据', err, res)
      const {
        data: { channels },
      } = res
      this.channelOptions = channels
    },
    // @下拉选值变化时发生
    changeHandle() {
      // console.log('当前选中项 id', this.channelId)
      this.$emit('input', this.channelId)
    },
  },
}
</script>

<style scoped lang=""></style>
